// https://vitepress.dev/guide/custom-theme
import { h } from 'vue'
import { throttle } from 'underscore'
import DefaultTheme from 'vitepress/theme'
import './style.css'

import Counter from './components/Counter.vue'
import TableWrapper from './components/TableWrapper.vue'

/** @type {import('vitepress').Theme} */
export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    })
  },
  enhanceApp({ app, router, siteData }) {
    // 注册全局组件
    app.component('Counter', Counter)

    // 修改全局组件table，在其外部包裹一层div
    app.component('TableWrapper', TableWrapper)

    // 自定义代码
    app.mixin({
      mounted() {
        /** 标注重要知识点标题为蓝色 */
        let els = document.querySelectorAll('.content a')
        let hs = document.querySelectorAll('.content h1,h2,h3,h4,h5,h6,h7,h8')

        els = Array.from(els)
        hs = Array.from(hs)
        const allEls = [...els, ...hs]

        allEls.forEach((el) => {
          // console.log(el.innerHTML, /^▸/.test(el.innerHTML))
          if (/@$/.test(el.innerHTML)) {
            el.style.color = 'blue'
          }
        })

        // 函数实现
        /** 保持当前标题滚动到可视区内 */
        function keepActiveElVisible() {
          let index = 0
          window.addEventListener(
            'scroll',
            throttle(() => {
              const activeEl = document.querySelector('.outline-marker')
              const asideContainerEl = document.querySelector('.aside-container') // offsetHeight，scrollHeight, scrollTo()
              const liEl = document.querySelector('.outline-link.active')

              const paddingTop = parseInt(getComputedStyle(asideContainerEl).paddingTop.replace('px', ''))
              const liHeight = liEl?.offsetHeight // 32
              const scrollTop = asideContainerEl?.scrollTop
              const clientHeight = asideContainerEl?.offsetHeight
              const activeTopRaw = parseInt(activeEl.style.top.replace('px', ''))
              const activeTop = activeTopRaw + paddingTop + liHeight * 18
              const top = activeTop - clientHeight + liHeight

              if (scrollTop + clientHeight < activeTop) {
                asideContainerEl.scrollTo({ top, behavior: 'smooth' })
              }

              if (scrollTop > activeTopRaw) {
                asideContainerEl.scrollTo({ top: scrollTop - liHeight, behavior: 'smooth' })
              }
            }, 200)
          )
        }
        keepActiveElVisible()

        /** 保持当前章节滚动到可视区 */
        function keepActiveChapterVisible() {
          setTimeout(function () {
            const activeChapterEl = document.querySelector('.VPSidebarItem.is-active')
            console.log(activeChapterEl)
            activeChapterEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
          }, 200)
        }
        keepActiveChapterVisible()
      }
    })

    // 注册全局方法，生成跳转链接地址
    app.config.globalProperties.genUrl = (title, dir = 'web') => {
      return `/doc/${dir}/${encodeURIComponent(title.replace(/-API$/i, ''))}-API.html`
    }
  }
}
